<template>
	<div>
		 <div class="banner" @click="handleBannerClick">
			 <img :src="bannerImg" alt="">

			 <div class="banner-info">
			 	   <div  class="banner-title">
			 	   	  {{this.sightName}}
			 	   </div>
			 	   <div class="banner-number">
			 	   	   <span class="iconfont banner-icon">&#xe632;</span>
			 	   	   {{this.bannerImgs.length}}
			 	   </div>
			 </div>
	     </div>
	     <fade-animation>	
	     		<common-gallary :imgs="bannerImgs" v-show="showGallary" @close="handleGallaryClose"></common-gallary>	
	     </fade-animation>
	</div>
	
</template>

<script>
    import CommonGallary from 'common/Gallary'
    import FadeAnimation from 'common/fade/FadeAnimation'
	export default {
		name: "DetailBanner",
		props: {
			sightName: String,
			bannerImg: String,
			bannerImgs: Array
		},
		data () {
			return {
				showGallary: false,
				imgs:["http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg","http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"]
			}
		},
		components: {
			CommonGallary,
			FadeAnimation

		},
		methods: {
			handleBannerClick () {
				this.showGallary = true
			},
			handleGallaryClose (){
				this.showGallary = false
			}
		}
	}
</script>
<style lang="stylus" scoped>
	.banner 
	   position:relative
	   overflow: hidden
	   height: 0
	   padding-bottom: 55%
	   .banner-img
	      width: 100%
	   .banner-info 
	      display: flex
	      position: absolute
	      left: 0
	      right: 0
	      bottom: 0
	      line-height: .6rem
	      color: #fff
	      background:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
	      .banner-title 
	         flex:1
	         font-size: .32rem
	         padding: 0 .2rem
	      .banner-number 
	         padding: 0 .4rem
	         line-height: .32rem
	         height: .32rem
	         border-radius: .2rem
	         background: rgba(0,0,0,0.8)
	         font-size: .24rem
	         .banner-icon
	           font-size: .24rem



</style>